<template>
  <div class="chronic-disease-container">
    <!-- 搜索筛选区域 -->
    <el-card class="search-card" shadow="never">
      <div class="search-form">
        <el-form :model="searchForm" inline>
          <el-form-item label="患者姓名">
            <el-input 
              v-model="searchForm.patientName" 
              placeholder="请输入患者姓名"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="疾病类型">
            <el-select 
              v-model="searchForm.diseaseType" 
              placeholder="请选择疾病类型"
              clearable
              style="width: 200px"
            >
              <el-option label="糖尿病" value="diabetes" />
              <el-option label="高血压" value="hypertension" />
              <el-option label="冠心病" value="coronary" />
              <el-option label="慢阻肺" value="copd" />
            </el-select>
          </el-form-item>
          <el-form-item label="登记时间">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-select 
              v-model="searchForm.status" 
              placeholder="请选择状态"
              clearable
              style="width: 150px"
            >
              <el-option label="活跃" value="active" />
              <el-option label="稳定" value="stable" />
              <el-option label="需关注" value="attention" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
            <el-button @click="handleReset">
              <el-icon><RefreshLeft /></el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <!-- 统计信息 -->
    <div class="stats-summary">
      <el-row :gutter="16">
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-number">{{ pagination.total }}</div>
            <div class="stat-label">总病例数</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-number">{{ activeCount }}</div>
            <div class="stat-label">活跃病例</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-number">{{ todayCount }}</div>
            <div class="stat-label">今日新增</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-number">{{ attentionCount }}</div>
            <div class="stat-label">需关注</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 操作栏 -->
    <el-card class="action-card" shadow="never">
      <div class="action-bar">
        <div class="action-left">
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon>
            新增病例
          </el-button>
          <el-button type="success" @click="handleBatchTransfer" :disabled="!selectedRows.length">
            <el-icon><Share /></el-icon>
            批量转诊
          </el-button>
          <el-button type="warning" @click="handleExport">
            <el-icon><Download /></el-icon>
            导出数据
          </el-button>
        </div>
        <div class="action-right">
          <el-button-group>
            <el-button 
              :type="viewMode === 'table' ? 'primary' : 'default'"
              @click="viewMode = 'table'"
            >
              <el-icon><List /></el-icon>
            </el-button>
            <el-button 
              :type="viewMode === 'card' ? 'primary' : 'default'"
              @click="viewMode = 'card'"
            >
              <el-icon><Grid /></el-icon>
            </el-button>
          </el-button-group>
        </div>
      </div>
    </el-card>

    <!-- 数据表格 -->
    <el-card v-if="viewMode === 'table'" class="table-card" shadow="never">
      <el-table 
        :data="tableData" 
        v-loading="loading"
        @selection-change="handleSelectionChange"
        stripe
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="patientId" label="患者ID" width="120" />
        <el-table-column prop="patientName" label="患者姓名" width="120" />
        <el-table-column prop="gender" label="性别" width="80">
          <template #default="{ row }">
            <el-tag :type="row.gender === '男' ? 'primary' : 'danger'" size="small">
              {{ row.gender }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="80" />
        <el-table-column prop="diseaseType" label="疾病类型" width="120">
          <template #default="{ row }">
            <el-tag :type="getDiseaseTypeColor(row.diseaseType)">
              {{ getDiseaseTypeName(row.diseaseType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusColor(row.status)">
              {{ getStatusName(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="lastFollowup" label="最后随访" width="120" />
        <el-table-column prop="nextFollowup" label="下次随访" width="120" />
        <el-table-column prop="createTime" label="登记时间" width="120" />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="handleDetail(row)">
              详情
            </el-button>
            <el-button type="success" size="small" @click="handleTransfer(row)">
              转诊
            </el-button>
            <el-dropdown>
              <el-button type="info" size="small">
                更多
                <el-icon><ArrowDown /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleEdit(row)">编辑</el-dropdown-item>
                  <el-dropdown-item @click="handleFollowup(row)">随访</el-dropdown-item>
                  <el-dropdown-item divided @click="handleDelete(row)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.size"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>

    <!-- 卡片视图 -->
    <div v-else class="card-view">
      <el-row :gutter="20">
        <el-col :span="8" v-for="item in tableData" :key="item.patientId">
          <el-card class="patient-card" shadow="hover">
            <div class="card-header">
              <div class="patient-info">
                <h3>{{ item.patientName }}</h3>
                <div class="patient-meta">
                  <el-tag size="small">{{ item.patientId }}</el-tag>
                  <span>{{ item.age }}岁 {{ item.gender }}</span>
                </div>
              </div>
              <el-tag :type="getStatusColor(item.status)">
                {{ getStatusName(item.status) }}
              </el-tag>
            </div>
            <div class="card-content">
              <div class="disease-info">
                <el-tag :type="getDiseaseTypeColor(item.diseaseType)">
                  {{ getDiseaseTypeName(item.diseaseType) }}
                </el-tag>
              </div>
              <div class="followup-info">
                <p><strong>最后随访:</strong> {{ item.lastFollowup }}</p>
                <p><strong>下次随访:</strong> {{ item.nextFollowup }}</p>
              </div>
            </div>
            <div class="card-actions">
              <el-button type="primary" size="small" @click="handleDetail(item)">
                详情
              </el-button>
              <el-button type="success" size="small" @click="handleTransfer(item)">
                转诊
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Search, RefreshLeft, Plus, Share, Download, List, Grid, ArrowDown 
} from '@element-plus/icons-vue'

const router = useRouter()

// 响应式数据
const loading = ref(false)
const viewMode = ref('table')
const selectedRows = ref([])

// 搜索表单
const searchForm = reactive({
  patientName: '',
  diseaseType: '',
  dateRange: [],
  status: ''
})

// 分页
const pagination = reactive({
  page: 1,
  size: 20,
  total: 156
})

// 模拟数据
const tableData = ref([
  {
    patientId: 'P001234',
    patientName: '张三',
    gender: '男',
    age: 65,
    diseaseType: 'diabetes',
    status: 'active',
    lastFollowup: '2024-01-10',
    nextFollowup: '2024-02-10',
    createTime: '2023-12-01'
  },
  {
    patientId: 'P001235',
    patientName: '李四',
    gender: '女',
    age: 58,
    diseaseType: 'hypertension',
    status: 'stable',
    lastFollowup: '2024-01-08',
    nextFollowup: '2024-02-08',
    createTime: '2023-11-15'
  },
  {
    patientId: 'P001236',
    patientName: '王五',
    gender: '男',
    age: 72,
    diseaseType: 'coronary',
    status: 'attention',
    lastFollowup: '2024-01-05',
    nextFollowup: '2024-01-20',
    createTime: '2023-10-20'
  }
])

// 计算属性
const activeCount = computed(() => 
  tableData.value.filter(item => item.status === 'active').length
)

const todayCount = computed(() => 12) // 模拟今日新增
const attentionCount = computed(() => 
  tableData.value.filter(item => item.status === 'attention').length
)

// 工具函数
const getDiseaseTypeName = (type: string) => {
  const map: Record<string, string> = {
    diabetes: '糖尿病',
    hypertension: '高血压',
    coronary: '冠心病',
    copd: '慢阻肺'
  }
  return map[type] || type
}

const getDiseaseTypeColor = (type: string) => {
  const map: Record<string, string> = {
    diabetes: 'primary',
    hypertension: 'success',
    coronary: 'warning',
    copd: 'danger'
  }
  return map[type] || 'info'
}

const getStatusName = (status: string) => {
  const map: Record<string, string> = {
    active: '活跃',
    stable: '稳定',
    attention: '需关注'
  }
  return map[status] || status
}

const getStatusColor = (status: string) => {
  const map: Record<string, string> = {
    active: 'success',
    stable: 'primary',
    attention: 'warning'
  }
  return map[status] || 'info'
}

// 事件处理函数
const handleSearch = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    ElMessage.success('搜索完成')
  }, 1000)
}

const handleReset = () => {
  Object.assign(searchForm, {
    patientName: '',
    diseaseType: '',
    dateRange: [],
    status: ''
  })
  handleSearch()
}

const handleAdd = () => {
  ElMessage.info('新增病例功能开发中')
}

const handleBatchTransfer = () => {
  ElMessage.info(`已选择 ${selectedRows.value.length} 条记录进行批量转诊`)
}

const handleExport = () => {
  ElMessage.info('导出功能开发中')
}

const handleSelectionChange = (selection: any[]) => {
  selectedRows.value = selection
}

const handleDetail = (row: any) => {
  router.push(`/medical-center/chronic-disease/detail/${row.patientId}`)
}

const handleTransfer = (row: any) => {
  ElMessage.info(`转诊患者: ${row.patientName}`)
}

const handleEdit = (row: any) => {
  ElMessage.info(`编辑患者: ${row.patientName}`)
}

const handleFollowup = (row: any) => {
  ElMessage.info(`随访患者: ${row.patientName}`)
}

const handleDelete = (row: any) => {
  ElMessageBox.confirm(
    `确定要删除患者 ${row.patientName} 的病例记录吗？`,
    '确认删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    ElMessage.success('删除成功')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

const handleSizeChange = (size: number) => {
  pagination.size = size
  handleSearch()
}

const handlePageChange = (page: number) => {
  pagination.page = page
  handleSearch()
}

onMounted(() => {
  handleSearch()
})
</script>

<style lang="scss" scoped>
.chronic-disease-container {
  .search-card {
    margin-bottom: 16px;
    
    .search-form {
      .el-form {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
      }
    }
  }

  .stats-summary {
    margin-bottom: 16px;
    
    .stat-item {
      text-align: center;
      padding: 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 8px;
      color: white;
      
      .stat-number {
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 8px;
      }
      
      .stat-label {
        font-size: 14px;
        opacity: 0.9;
      }
    }
  }

  .action-card {
    margin-bottom: 16px;
    
    .action-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .table-card {
    .pagination-container {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
  }

  .card-view {
    .patient-card {
      margin-bottom: 20px;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-2px);
      }
      
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 16px;
        
        .patient-info {
          h3 {
            margin: 0 0 8px 0;
            color: #303133;
            font-size: 18px;
          }
          
          .patient-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: #909399;
          }
        }
      }
      
      .card-content {
        margin-bottom: 16px;
        
        .disease-info {
          margin-bottom: 12px;
        }
        
        .followup-info {
          p {
            margin: 4px 0;
            font-size: 14px;
            color: #606266;
          }
        }
      }
      
      .card-actions {
        display: flex;
        gap: 8px;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .chronic-disease-container {
    .stats-summary {
      .el-col {
        margin-bottom: 12px;
      }
    }
    
    .action-bar {
      flex-direction: column;
      gap: 12px;
      align-items: stretch;
    }
    
    .card-view {
      .el-col {
        span: 24;
      }
    }
  }
}
</style>